<section class="content-header">
	<h1>&nbsp;</h1>
	<ol class="breadcrumb">
		<li><a href="javascript:void(0);"><i class="fa fa-dashboard"></i>
				云链监控</a></li>
		<li><a href="#/app/monitor/queues">Queues监控</a></li>
		<li class="active" data-ng-bind="currentArea"></li>
		<li class="active" data-ng-bind="currentNav"></li>
	</ol>
</section>
<!-- Main content -->
<section class="content">

	<div class="row" ng-controller="queueDetailMonitorCtrl">
		<div class="col-xs-12">
			<div class="box">
				<div class="box-header">
					<div class="row">
						<div class="col-xs-4 col-md-4">
							<a id="btnExpand" class="btn btn-default"
								style="margin-left: 20px;"
								data-ng-click="toggleExpand('btnExpand')"> <span
								class="glyphicon glyphicon-collapse-down"></span> <font>收起所有</font></a>
						</div>
						<div class="col-xs-8 col-md-8">
							<select data-ng-model="refreshTime" id="refreshTime"
								class="input-sm" name="refreshTime"
								ng-change="changeRefreshTime()" style="float: right;"
								ng-options="option.value as option.label for option in $root.configs.monitorRefreshCycle"></select>
							<select data-ng-model="$root.configs.defaultDataAge"
								class="input-sm" ng-change="$root.chartRangeChange()"
								style="float: right; margin-right: 10px;"
								ng-options="option.age as option.label for option in $root.configs.monitorChartRange">
							</select>
						</div>
					</div>
				</div>
				<!-- /.box-header -->
				<div class="box-body" style="">
					<div class="panel-group" id="accordion">
						<div class="panel panel-info">
							<div class="panel-heading"
								data-ng-click="toggle('panelChartQueueMsg')">
								<h4 class="panel-title">
									<a data-toggle="collapse" data-parent="#accordion"> Queued
										Message </a>
								</h4>
							</div>
							<div id="panelChartQueueMsg" class="panel-collapse collapse in">
								<div class="panel-body">
									<div id="chartQueueMsg"
										style="padding: 0 0 0 0; margin: 0 10px 0 0;"></div>
								</div>
							</div>
						</div>
						<div class="panel panel-info">
							<div class="panel-heading"
								data-ng-click="toggle('panelChartMsgRate')">
								<h4 class="panel-title">
									<a data-toggle="collapse" data-parent="#accordion"> Message
										Rate </a>
								</h4>
							</div>
							<div id="panelChartMsgRate" class="panel-collapse collapse in">
								<div class="panel-body">
									<div id="chartMsgRate"
										style="padding: 0 0 0 0; margin: 0 10px 0 0;"></div>
								</div>
							</div>
						</div>
						<div class="panel panel-info">
							<div class="panel-heading" data-ng-click="toggle('panelNode')">
								<h4 class="panel-title">
									<a data-toggle="collapse" data-parent="#accordion"> Details
									</a>
								</h4>
							</div>
							<div id="panelNode" class="panel-collapse collapse in">
								<div class="panel-body">
									<div class="row">
										<div class="col-md-6">
											<div style="margin-top: 10px;">
												<div
													style="height: 28px; float: left; text-align: right; width: 160px; padding: 5px 10px 0px 0; font-weight: bold; border-right: solid 1px #cccccc">
													Features</div>
												<div style="float: left; padding: 5px 0px 0px 10px;">
													durable: {{queue.durable}} , auto_delete:
													{{queue.auto_delete}}</div>
												<div style="clear: both;"></div>
												<div
													style="height: 28px; float: left; text-align: right; width: 160px; padding: 5px 10px 0px 0; font-weight: bold; border-right: solid 1px #cccccc">
													State</div>
												<div style="padding: 5px 0 0 10px; float: left;"
													data-ng-bind-html="queue.state | channelState : queue.idle_since">
												</div>
												<div style="clear: both;"></div>
												<div
													style="height: 28px; float: left; text-align: right; width: 160px; padding: 5px 10px 0px 0; font-weight: bold; border-right: solid 1px #cccccc">
													Consumers</div>
												<div style="padding: 5px 0 0 10px; float: left;"
													data-ng-bind="queue.consumers"></div>
												<div style="clear: both;"></div>
												<div
													style="height: 28px; float: left; text-align: right; width: 160px; padding: 5px 10px 0px 0; font-weight: bold; border-right: solid 1px #cccccc">
													Consumer utilisation</div>
												<div style="padding: 5px 0 0 10px; float: left;"
													data-ng-bind="queue.consumer_utilisation"></div>
												<div style="clear: both;"></div>
												<div
													style="height: 28px; float: left; text-align: right; width: 160px; padding: 5px 10px 0px 0; font-weight: bold; border-right: solid 1px #cccccc">
													Policy</div>
												<div style="padding: 5px 0 0 10px; float: left;"
													data-ng-bind="queue.policy"></div>
												<div style="clear: both;"></div>
											</div>
										</div>
										<div class="col-md-6">
											<table class="table table-bordered"
												style="text-align: center;">
												<thead style="background-color: #eee;">
													<tr>
														<th style="text-align: center;">&nbsp;</th>
														<th style="text-align: center;">Total</th>
														<th style="text-align: center;">Ready</th>
														<th style="text-align: center;">Unacked</th>
														<th style="text-align: center;">In memory</th>
														<th style="text-align: center;">Persistent</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td>Messages</td>
														<td data-ng-bind="queue.messages"></td>
														<td data-ng-bind="queue.messages_ready"></td>
														<td data-ng-bind="queue.messages_unacknowledged"></td>
														<td data-ng-bind="queue.messages_ram"></td>
														<td data-ng-bind="queue.messages_persistent"></td>
													</tr>
													<tr>
														<td>Message body bytes</td>
														<td data-ng-bind="queue.message_bytes | capacityFormat"></td>
														<td
															data-ng-bind="queue.message_bytes_ready | capacityFormat"></td>
														<td
															data-ng-bind="queue.message_bytes_unacknowledged | capacityFormat"></td>
														<td
															data-ng-bind="queue.message_bytes_ram | capacityFormat"></td>
														<td
															data-ng-bind="queue.message_bytes_persistent | capacityFormat"></td>
													</tr>
													<tr>
														<td>Process memory</td>
														<td data-ng-bind="queue.memory | capacityFormat"></td>
														<td colspan="4"></td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="panel panel-info">
							<div class="panel-heading"
								data-ng-click="toggle('consumerspanelNode')">
								<h4 class="panel-title">
									<a data-toggle="collapse" data-parent="#accordion">
										Consumers </a>
								</h4>
							</div>
							<div id="consumerspanelNode" class="panel-collapse collapse in">
								<div class="panel-body">
									<div class="row" style="margin: 0 0 0 0;">
										<table class="table table-bordered"
											style="text-align: center;">
											<thead style="background-color: #eee;">
												<tr>
													<th style="text-align: center; width: 120px;">Channel</th>
													<th style="text-align: center; width: 120px;">Consumer
														tag</th>
													<th style="text-align: center; width: 120px;">Ack
														required</th>
													<th style="text-align: center; width: 120px;">Exclusive</th>
													<th style="text-align: center; width: 120px;">Prefetch
														count</th>
													<th style="text-align: center; width: 120px;">Arguments</th>
												</tr>
											</thead>
											<tbody>
												<tr data-ng-repeat="consumer in queue.consumer_details">
													<td
														data-ng-bind="consumer.channel_details.name | channelName"></td>
													<td data-ng-bind="consumer.consumer_tag"></td>
													<td data-ng-bind="consumer.ack_required"></td>
													<td data-ng-bind="consumer.exclusive"></td>
													<td data-ng-bind="consumer.prefetch_count"></td>
													<td></td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
						<div class="panel panel-info">
							<div class="panel-heading"
								data-ng-click="toggle('bindingsPanelNode')">
								<h4 class="panel-title">
									<a data-toggle="collapse" data-parent="#accordion">
										Bindings </a>
								</h4>
							</div>
							<div id="bindingsPanelNode" class="panel-collapse collapse in">
								<div class="panel-body">
									<div class="row" style="margin: 0 0 0 0;">
										<table class="table table-bordered"
											style="text-align: center;">
											<thead style="background-color: #eee;">
												<tr>
													<th style="text-align: center; width: 120px;">From</th>
													<th style="text-align: center; width: 120px;">Routing
														key</th>
													<th style="text-align: center; width: 120px;">Arguments</th>
												</tr>
											</thead>
											<tbody>
												<tr data-ng-repeat="binding in bindings">
													<td data-ng-show="binding.source==''">(Default
														exchange binding)</td>
													<td data-ng-show="binding.source != ''"><a
														href="#/app/monitor/exchange/{{selectedArea}}/{{binding.source}}"
														data-ng-bind="binding.source"></a></td>
													<td data-ng-bind="binding.routing_key"></td>
													<td></td>
												</tr>
												<tr>
													<td colspan="3" style="text-align: center;"><span
														class="glyphicon glyphicon-arrow-down"></span></td>
												</tr>
												<tr>
													<td colspan="3" style="text-align: center;"><button
															type="button" class="btn btn-default"
															style="font-weight: bold;">This Queue</button></td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- /.box-body -->
			</div>
			<!-- /.box -->
		</div>
	</div>

</section>